<script setup>
import { Share } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();
const doCardClick = () => {
  router.push(`/mainPage/app/detail/${props.app.id}`);
};
// 分享弹窗的引用
const shareModalRef = ref(null);

// 定义 props
const props = defineProps({
  app: {
    type: Object,
    required: true
  }
})
// 分享链接
const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.app.id}`;
const doShare = () => {
  if (shareModalRef.value) {
    shareModalRef.value.openModal();
  }
  // 阻止冒泡，防止跳转到详情页
   e.stopPropagation();
}
</script>

<template>
  <el-card class="appCard" @click="doCardClick">
    <template #header>
      <div class="card-header">
        <span>{{ app.appName }}</span>
      </div>
    </template>
    <div class="card-image">
      <img
          :alt="app.appName"
          :src="app.appIcon"
          class="image"
          style="height: auto"
      />
    </div>
    <div class="card-content">
      <div class="card-meta">
        <el-avatar
            :size="24"
            :src="app.user?.user_pic"
            class="avatar"
        />
        <span class="user-name">
          {{ app.user?.nickname ?? "无名" }}
        </span>
      </div>
      <p class="description">
        {{ app.appDesc }}
      </p>
    </div>
    <div class="card-actions">
      <el-button
          type="text"
          @click.stop="doShare"
      >
        <el-icon><Share /></el-icon>
      </el-button>
    </div>
  </el-card>
  <ShareModal :link="shareLink" title="应用分享" ref="shareModalRef" />
</template>

<style scoped>
.appCard {
  cursor: pointer;
  max-width: 300px;
  min-width: 240px;
  min-height: 420px;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 保证所有卡片高度一致 */
}

.card-image {
  height: 184px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 10px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-meta {
  display: flex;
  align-items: center;
  color: #1D2129;
}

.avatar {
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
}

.description {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  /* 限制最大高度，超出部分省略号 */
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}

.icon-hover:hover {
  background-color: #f5f5f5;
}
</style>